<template>
  <div>
    <v-page-search>
      <el-date-picker v-model.trim="searchForm.planYear"
                      type="year"
                      placeholder="选择年"
                      @change.passive="getTableData"
                      :disabled="searchForm.planMonth !=='' && searchForm.planMonth !== null">
      </el-date-picker>
      <el-date-picker v-model.trim="searchForm.planMonth"
                      type="month"
                      placeholder="选择年月"
                      @change.passive="getTableData"
                      :disabled="searchForm.planYear !=='' && searchForm.planYear !== null">
      </el-date-picker>
      <div slot="search-but">
        <el-button size="small"
                   type="primary"
                   icon="el-icon-search"
                   @click="getTableData">搜索</el-button>
        <el-button size="small"
                   type="info"
                   icon="el-icon-delete"
                   @click="clearCondition">清除</el-button>
        <el-button size="small"
                   type="warning"
                   icon="el-icon-document"
                   v-loading="exprotLoading"
                   @click="exprotInfo">导出</el-button>
      </div>
    </v-page-search>
    <el-tabs v-model="activeName"
             @tab-click="handleClick"
             type="card">
      <el-tab-pane label="签订类型统计"
                   name="typePlan">
        <month-table :table-data="tableData"
                     :table-title="tableTitle"
                     :active-name="activeName"
                     :search-form="searchForm"
                     :loading="loading"></month-table>
      </el-tab-pane>
      <el-tab-pane label="区域业绩统计"
                   name="areaPlan">
        <area-table :table-data="tableAreaData"
                    :table-title="tableTitle"
                    :active-name="activeName"
                    :search-form="searchForm"
                    :loading="loading"></area-table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import Moment from 'moment'
import MonthTable from './plant/monthTable'
import AreaTable from './plant/areaTable'
import { getTypePlan, getAreaPlan, exprotPlan } from '@/api/maintenance'

export default {
  components: {
    MonthTable,
    AreaTable
  },
  data() {
    return {
      loading: false,
      exprotLoading: false,
      searchForm: {
        planYear: '',
        planMonth: ''
      },
      tableData: [],
      tableAreaData: [],
      tableTitle: '',
      activeName: 'typePlan'
    }
  },
  mounted() {
    this.getTableData()
  },
  methods: {
    getTableData() {
      this.loading = true
      // 初始化表头名称
      if (this.searchForm.planMonth !== '' && this.searchForm.planMonth !== null) {
        this.tableTitle = Moment(this.searchForm.planMonth).format('YYYY-MM') + '月报表'
        this.searchForm.planMonth = Moment(this.searchForm.planMonth).format('YYYY-MM')
      } else if (this.searchForm.planYear !== '' && this.searchForm.planYear !== null) {
        this.tableTitle = Moment(this.searchForm.planYear).format('YYYY') + '年报表'
        this.searchForm.planYear = Moment(this.searchForm.planYear).format('YYYY')
      } else {
        this.tableTitle = Moment().format('YYYY-MM') + '月报表'
      }

      if (this.activeName === 'typePlan') {
        getTypePlan(this.searchForm).then(res => {
          this.tableData = res.data.data
        })
      } else {
        getAreaPlan(this.searchForm).then(res => {
          this.tableAreaData = res.data.data
        })
      }
      this.loading = false
    },
    // 清除筛选条件
    clearCondition() {
      this.searchForm.planYear = ''
      this.searchForm.planMonth = ''
      this.getTableData()
    },
    // 切换标签
    handleClick(tag) {
      this.activeName = tag.name
      this.getTableData()
    },
    // 导出数据
    exprotInfo() {
      this.exprotLoading = true
      const params = this.searchForm
      if (this.activeName === 'typePlan') {
        params.type = 'type'
      } else {
        params.type = 'area'
      }
      exprotPlan(params).then(res => {
        if (res.data.success) {
          window.open('http://' + res.data.data)
        }
      })
      this.exprotLoading = false
    }
  }
}
</script>
